<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>API | MuiPlayer</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/favicon.ico">
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="/css/mui-player.min.css">
    <link rel="stylesheet" href="/css/swiper.min.css">
    <link rel="stylesheet" href="/css/CommentCoreLibrary.min.css">
    <link rel="apple-touch-icon" href="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/logo_solid.png">
    <script src="https://www.googletagmanager.com/gtag/js?id=G-X4RSEE27EY"></script>
    <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'G-X4RSEE27EY');
        </script>
    <script src="/plugin/flv.min.js"></script>
    <script src="/plugin/hls.min.js"></script>
    <script src="/js/mui-player.min.js"></script>
    <script src="/js/CommentCoreLibrary.min.js"></script>
    <script src="/js/swiper.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <meta name="description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta name="charset" content="utf-8">
    <meta name="baidu-site-verification" content="code-AdGRxnQ9NZ">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta property="og:site_name" content="MuiPlayer">
    <meta property="og:type" content="article">
    <meta property="og:image" content="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/mobile_preview.png">
    <meta name="theme-color" content="#FFFFFF">
    <meta property="og:title" content="">
    <meta property="og:description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta property="og:url" content="https://muiplayer.js.org/">
    <meta property="og:locale" content="en-US">
    <meta property="twitter:title" content="">
    <meta property="twitter:description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta name="keywords" content="HTML5 video, player, hls, danmaku, adaptive-bitrate, muiplayer">
    
    <link rel="preload" href="/assets/css/0.styles.ae6ed136.css" as="style"><link rel="preload" href="/assets/js/app.3641bd26.js" as="script"><link rel="preload" href="/assets/js/23.35f66f6c.js" as="script"><link rel="preload" href="/assets/js/3.67a24b41.js" as="script"><link rel="preload" href="/assets/js/31.daa6ba5b.js" as="script"><link rel="preload" href="/assets/js/15.78fdfcaf.js" as="script"><link rel="prefetch" href="/assets/js/1.54927c41.js"><link rel="prefetch" href="/assets/js/10.dd4adaf8.js"><link rel="prefetch" href="/assets/js/11.ea997365.js"><link rel="prefetch" href="/assets/js/12.01af38a6.js"><link rel="prefetch" href="/assets/js/13.75800705.js"><link rel="prefetch" href="/assets/js/14.9fc60c4c.js"><link rel="prefetch" href="/assets/js/16.0101612c.js"><link rel="prefetch" href="/assets/js/17.a9b41ba5.js"><link rel="prefetch" href="/assets/js/18.a55912b8.js"><link rel="prefetch" href="/assets/js/19.13ce6fb6.js"><link rel="prefetch" href="/assets/js/20.57cf3163.js"><link rel="prefetch" href="/assets/js/21.a9f966ac.js"><link rel="prefetch" href="/assets/js/22.65e9060e.js"><link rel="prefetch" href="/assets/js/24.3adbb4ca.js"><link rel="prefetch" href="/assets/js/25.00421a1d.js"><link rel="prefetch" href="/assets/js/26.ba6e1ac8.js"><link rel="prefetch" href="/assets/js/27.4e1b228b.js"><link rel="prefetch" href="/assets/js/28.2d7617cb.js"><link rel="prefetch" href="/assets/js/29.ff74fd8e.js"><link rel="prefetch" href="/assets/js/30.ff8d825c.js"><link rel="prefetch" href="/assets/js/32.9eac0031.js"><link rel="prefetch" href="/assets/js/33.32a2153a.js"><link rel="prefetch" href="/assets/js/34.da24de19.js"><link rel="prefetch" href="/assets/js/35.c97bfd00.js"><link rel="prefetch" href="/assets/js/36.3fd6a073.js"><link rel="prefetch" href="/assets/js/37.262c376a.js"><link rel="prefetch" href="/assets/js/38.2bd8c4ba.js"><link rel="prefetch" href="/assets/js/39.618c3695.js"><link rel="prefetch" href="/assets/js/4.9edd66f8.js"><link rel="prefetch" href="/assets/js/40.0502620b.js"><link rel="prefetch" href="/assets/js/41.9a3bd9b3.js"><link rel="prefetch" href="/assets/js/42.8ac30a45.js"><link rel="prefetch" href="/assets/js/43.e3fc5609.js"><link rel="prefetch" href="/assets/js/44.9acf05da.js"><link rel="prefetch" href="/assets/js/45.8c740c98.js"><link rel="prefetch" href="/assets/js/46.250aba22.js"><link rel="prefetch" href="/assets/js/47.83ee64f1.js"><link rel="prefetch" href="/assets/js/48.8d559ee8.js"><link rel="prefetch" href="/assets/js/49.6eeaca4b.js"><link rel="prefetch" href="/assets/js/5.35f74ec6.js"><link rel="prefetch" href="/assets/js/50.6e5e287b.js"><link rel="prefetch" href="/assets/js/51.ff3ae70a.js"><link rel="prefetch" href="/assets/js/52.378b3b20.js"><link rel="prefetch" href="/assets/js/53.868673eb.js"><link rel="prefetch" href="/assets/js/54.3c62a57a.js"><link rel="prefetch" href="/assets/js/55.035ed35d.js"><link rel="prefetch" href="/assets/js/56.08925c33.js"><link rel="prefetch" href="/assets/js/57.5d073ed4.js"><link rel="prefetch" href="/assets/js/58.dce950e6.js"><link rel="prefetch" href="/assets/js/59.092c0de9.js"><link rel="prefetch" href="/assets/js/6.30b43e5d.js"><link rel="prefetch" href="/assets/js/60.8526ebe1.js"><link rel="prefetch" href="/assets/js/61.c02d2349.js"><link rel="prefetch" href="/assets/js/62.b93eeaf2.js"><link rel="prefetch" href="/assets/js/63.b363131d.js"><link rel="prefetch" href="/assets/js/64.0cda51e1.js"><link rel="prefetch" href="/assets/js/65.d26b33ae.js"><link rel="prefetch" href="/assets/js/66.d07350b7.js"><link rel="prefetch" href="/assets/js/67.85653372.js"><link rel="prefetch" href="/assets/js/7.7232d571.js"><link rel="prefetch" href="/assets/js/8.772a3a10.js"><link rel="prefetch" href="/assets/js/9.5f308baf.js">
    <link rel="stylesheet" href="/assets/css/0.styles.ae6ed136.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">MuiPlayer</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">
  Guide
</a></div><div class="nav-item"><a href="/demo/" class="nav-link">
  Demo
</a></div><div class="nav-item"><a href="/joinUs/" class="nav-link">
  Download
</a></div><div class="nav-item"><a href="https://gitee.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/api.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  English
</a></li><li class="dropdown-item"><!----> <a href="/zh/guide/api.html" class="nav-link">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" class="nav-link router-link-active">
  Guide
</a></div><div class="nav-item"><a href="/demo/" class="nav-link">
  Demo
</a></div><div class="nav-item"><a href="/joinUs/" class="nav-link">
  Download
</a></div><div class="nav-item"><a href="https://gitee.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/api.html" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  English
</a></li><li class="dropdown-item"><!----> <a href="/zh/guide/api.html" class="nav-link">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Guide</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/" aria-current="page" class="sidebar-link">Introduction</a></li><li><a href="/guide/begin.html" class="sidebar-link">Quick start</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/begin.html#installation" class="sidebar-link">installation</a></li><li class="sidebar-sub-header"><a href="/guide/begin.html#usage" class="sidebar-link">usage</a></li></ul></li><li><a href="/guide/api.html" aria-current="page" class="active sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/api.html#main-configuration" class="sidebar-link">Main configuration</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#custom-configuration" class="sidebar-link">Custom configuration</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#play-event-monitoring" class="sidebar-link">Play event monitoring</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#player-interface" class="sidebar-link">Player interface</a></li></ul></li><li><a href="/guide/mui-player-desktop-plugin.html" class="sidebar-link">PC extension</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#installation" class="sidebar-link">installation</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#custom-settings-group-configuration" class="sidebar-link">Custom settings group configuration</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#customize-the-right-click-menu" class="sidebar-link">Customize the right click menu</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#action-event-monitoring" class="sidebar-link">Action event monitoring</a></li></ul></li><li><a href="/guide/plus-desktop-plugin.html" class="sidebar-link">Pc extend【Professional edition】</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#download" class="sidebar-link">download</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#configuration-options-plus" class="sidebar-link">Configuration options plus</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#interface-plus" class="sidebar-link">Interface plus</a></li></ul></li><li><a href="/guide/plus-mobile-plugin.html" class="sidebar-link">Mobile extend【Professional edition】</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#scan-qr-code" class="sidebar-link">Scan QR code</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#download" class="sidebar-link">download</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#action-event-monitoring" class="sidebar-link">Action event monitoring</a></li></ul></li><li><a href="/guide/preset.html" class="sidebar-link">MediaSource support</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/preset.html#use-hls-js-or-flv-js" class="sidebar-link">Use hls.js or flv.js</a></li><li class="sidebar-sub-header"><a href="/guide/preset.html#configuration" class="sidebar-link">Configuration</a></li><li class="sidebar-sub-header"><a href="/guide/preset.html#custom-use-mse-library" class="sidebar-link">Custom use MSE library</a></li></ul></li><li><a href="/guide/thumbnails.html" class="sidebar-link">Video thumbnail</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/barrage.html" class="sidebar-link">Video danmaku</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/barrage.html#use-commentcorelibrary" class="sidebar-link">Use CommentCoreLibrary</a></li></ul></li><li><a href="/guide/subtitle.html" class="sidebar-link">Video subtitles</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/custom-control.html" class="sidebar-link">Custom player controls</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/custom-control.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-1-customize-the-player-header-button" class="sidebar-link">Example 1: Customize the player header button</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-2-customize-the-buttons-at-the-bottom-of-the-player" class="sidebar-link">Example 2: Customize the buttons at the bottom of the player</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-3-customize-the-pop-up-window-on-the-right-sidebar" class="sidebar-link">Example 3: Customize the pop-up window on the right sidebar</a></li></ul></li><li><a href="/guide/uni-app.html" class="sidebar-link">Use in uni-app</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/other-problem.html" class="sidebar-link">other problems</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="api"><a href="#api" class="header-anchor">#</a> API</h1> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>mui-player.js creates the basic controls used by the player, including the progress bar defined on the player, the start/pause/full-screen switch button, and the lower part of the player head control. It handles video playback and compatibility issues.</p> <p>In order to make the code has good separation module, we targeted the mobile terminal and PC terminal to develop a suitable plug out of the box, when you read this you can choose to use these two types of <strong>extensions</strong> of the</p> <p><a href="/guide/mui-player-desktop-plugin/">mui-player-desktop-plugin.js</a></p> <p><a href="/guide/plus-mobile-plugin/">mui-player-mobile.plugin.js</a></p></div> <p>mui-player.js is the core library for creating players, check the configurable api and its external interface:</p> <ul><li><a href="#main-configuration">Main configuration</a></li> <li><a href="#custom-configuration">Custom configuration</a></li> <li><a href="#play-event-monitoring">Play event monitoring</a></li> <li><a href="#player-interface">Player interface</a></li></ul> <h2 id="main-configuration"><a href="#main-configuration" class="header-anchor">#</a> Main configuration</h2> <p>From here, initialize the player instance:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> mp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MuiPlayer</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    container<span class="token operator">:</span><span class="token string">'#mui-player'</span><span class="token punctuation">,</span>
    src<span class="token operator">:</span><span class="token string">'../media/media.mp4'</span><span class="token punctuation">,</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Attribute name</th> <th style="text-align:left;">Types of</th> <th style="text-align:left;">Defaults</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;">container</td> <td style="text-align:left;">String/Element</td> <td style="text-align:left;">required</td> <td style="text-align:left;">Specify the player container</td></tr> <tr><td style="text-align:left;">src</td> <td style="text-align:left;">String</td> <td style="text-align:left;">required</td> <td style="text-align:left;">Resource address for video playback</td></tr> <tr><td style="text-align:left;">title</td> <td style="text-align:left;">String</td> <td style="text-align:left;"></td> <td style="text-align:left;">title</td></tr> <tr><td style="text-align:left;">autoplay</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td> <td style="text-align:left;">Whether to play automatically, please <a href="/guide/other-problem.html">reference</a> for the setting of autoplay attribute</td></tr> <tr><td style="text-align:left;">preload</td> <td style="text-align:left;">String</td> <td style="text-align:left;">auto</td> <td style="text-align:left;">Whether the video is preloaded, the optional value is none | metadata | auto. If autoplay=true, this attribute is ignored.</td></tr> <tr><td style="text-align:left;">loop</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td> <td style="text-align:left;">Whether to loop</td></tr> <tr><td style="text-align:left;">muted</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td> <td style="text-align:left;">Whether to play muted</td></tr> <tr><td style="text-align:left;">width</td> <td style="text-align:left;">String/Number</td> <td style="text-align:left;">auto</td> <td style="text-align:left;">Initialize the player width</td></tr> <tr><td style="text-align:left;">height</td> <td style="text-align:left;">String/Number</td> <td style="text-align:left;">225px</td> <td style="text-align:left;">Initialize the player height</td></tr> <tr><td style="text-align:left;">lang</td> <td style="text-align:left;">String</td> <td style="text-align:left;">navigator.language</td> <td style="text-align:left;">Player interface language, optional en | zh-cn | zh-tw</td></tr> <tr><td style="text-align:left;">volume</td> <td style="text-align:left;">Number</td> <td style="text-align:left;">1</td> <td style="text-align:left;">Initially set the video volume, the value is 0-1</td></tr> <tr><td style="text-align:left;">autoFit</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">true</td> <td style="text-align:left;">Whether the player container height is adaptive to the video height</td></tr> <tr><td style="text-align:left;">poster</td> <td style="text-align:left;">String</td> <td style="text-align:left;"></td> <td style="text-align:left;">Resource address of video cover</td></tr> <tr><td style="text-align:left;">live</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td> <td style="text-align:left;">Whether to enable the live broadcast mode, the default menu configuration of the live broadcast mode does not allow controlling the playback speed and loop playback</td></tr> <tr><td style="text-align:left;">initFullFixed</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">false</td> <td style="text-align:left;">Initialize whether the web page is played in full screen</td></tr> <tr><td style="text-align:left;">autoOrientaion</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">true</td> <td style="text-align:left;">Whether to switch the direction automatically when full screen, in <a href="http://www.html5plus.org/doc/zh_cn/runtime.html" target="_blank" rel="noopener noreferrer">html5+<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>The screen will automatically rotate when the screen is in full screen, and some mobile browsers automatically rotate the direction when the screen is full.  <br>Tag: There is a slight difference when switching to full screen in ios. In full screen mode, the system is called to play in full screen.</td></tr> <tr><td style="text-align:left;">dragSpotShape</td> <td style="text-align:left;">String</td> <td style="text-align:left;">circular</td> <td style="text-align:left;">Set the shape of the drag point of the progress bar, optional circula | square</td></tr> <tr><td style="text-align:left;">objectFit</td> <td style="text-align:left;">String</td> <td style="text-align:left;">contain</td> <td style="text-align:left;">The size of the video and the representation of the video container.Optional contain | cover</td></tr> <tr><td style="text-align:left;">closeControlsTimer</td> <td style="text-align:left;">Number</td> <td style="text-align:left;">3500</td> <td style="text-align:left;">Set the time for the player to hide the controls regularly, which can be used with the toggleControls function interface; <code>new</code></td></tr> <tr><td style="text-align:left;">#</td> <td style="text-align:left;"></td> <td style="text-align:left;"></td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">videoAttribute</td> <td style="text-align:left;">Array</td> <td style="text-align:left;">[]</td> <td style="text-align:left;">This attribute is to add more H5 Video tags. The parameter is to accept each key value object. Note that if the attribute value in the array exists in the existing setting, it will be overwritten.  <br><br> If you need to configure the declaration to enable the same layer playback, the configuration is as follows: videoAttribute:[  {attrKey:'webkit-playsinline',attrValue:'webkit-playsinline'},  {attrKey:'playsinline',attrValue:'playsinline'}, {attrKey :'x5-video-player-type',attrValue:'h5-page'},  ]</td></tr> <tr><td style="text-align:left;">#</td> <td style="text-align:left;"></td> <td style="text-align:left;"></td> <td style="text-align:left;"></td></tr> <tr><td style="text-align:left;">subtitle</td> <td style="text-align:left;">Object</td> <td style="text-align:left;">{}</td> <td style="text-align:left;">Add video subtitles. Currently only supports webvtt subtitle format, please refer to <a href="/guide/subtitle/">video subtitles</a></td></tr> <tr><td style="text-align:left;">parse</td> <td style="text-align:left;">Object</td> <td style="text-align:left;">{}</td> <td style="text-align:left;">Add video decoding plug-in. Please refer to: <a href="/guide/preset/">Decoding Play</a></td></tr> <tr><td style="text-align:left;">plugins</td> <td style="text-align:left;">Object</td> <td style="text-align:left;">{}</td> <td style="text-align:left;">Add playback extension plug-in, please refer to: <a href="/guide/mui-player-mobile-plugin/">mobile extension </a><a href="/guide/mui-player-desktop-plugin/">PC extension</a></td></tr></tbody></table> <h2 id="custom-configuration"><a href="#custom-configuration" class="header-anchor">#</a> Custom configuration</h2> <p>Customize the player controls and styles:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> mp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MuiPlayer</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    container<span class="token operator">:</span><span class="token string">'#mui-player'</span><span class="token punctuation">,</span>
    src<span class="token operator">:</span><span class="token string">'../media/media.mp4'</span><span class="token punctuation">,</span>

    themeColor<span class="token operator">:</span><span class="token string">'#55c612'</span><span class="token punctuation">,</span> <span class="token comment">// Custom theme color</span>
    <span class="token operator">...</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><table><thead><tr><th style="text-align:left;">Attribute name</th> <th style="text-align:left;">Types of</th> <th style="text-align:left;">Defaults</th> <th style="text-align:left;">Description</th></tr></thead> <tbody><tr><td style="text-align:left;">themeColor</td> <td style="text-align:left;">String</td> <td style="text-align:left;">#1e98d4</td> <td style="text-align:left;">Theme color</td></tr> <tr><td style="text-align:left;">showMiniProgress</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">true</td> <td style="text-align:left;">Whether to display the mini progress bar at the bottom, which is displayed when the view manipulation control is hidden. It is invalid when the configuration item live=true.</td></tr> <tr><td style="text-align:left;">pageHead</td> <td style="text-align:left;">Boolean</td> <td style="text-align:left;">true</td> <td style="text-align:left;">In non-full-screen mode, whether to display the head operation controls of the player</td></tr> <tr><td style="text-align:left;"># custom</td> <td style="text-align:left;">Object</td> <td style="text-align:left;"></td> <td style="text-align:left;">Customize player controls.Please refer to: <a href="/guide/custom-control/">custom player controls</a></td></tr> <tr><td style="text-align:left;">custom.headControls</td> <td style="text-align:left;">Array</td> <td style="text-align:left;"></td> <td style="text-align:left;">Customize the player head button group, the parameter accepts a configuration array, the maximum configurable object is 5,<a href="/guide/custom-control.html#example-1-customize-the-player-header-button">reference</a></td></tr> <tr><td style="text-align:left;">custom.footerControls</td> <td style="text-align:left;">Array</td> <td style="text-align:left;"></td> <td style="text-align:left;">Customize the control group at the bottom of the player, the parameter accepts a configuration array, the maximum configurable object is 5, <a href="/guide/custom-control.html#example-2-customize-the-buttons-at-the-bottom-of-the-player">reference</a></td></tr> <tr><td style="text-align:left;">custom.rightSidebar</td> <td style="text-align:left;"></td> <td style="text-align:left;"></td> <td style="text-align:left;">Customize the pop-up bar on the right side of the player, the parameter accepts a configuration array, the maximum configurable object is 5,<a href="/guide/custom-control.html#example-3-customize-the-pop-up-window-on-the-right-sidebar">reference</a></td></tr></tbody></table> <h2 id="play-event-monitoring"><a href="#play-event-monitoring" class="header-anchor">#</a> Play event monitoring</h2> <p>MuiPlayer manages part of the playback events, and can handle the appropriate required actions by adding a listener to the specified event. Example:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token keyword">var</span> mp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MuiPlayer</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span>
    
<span class="token comment">// The monitor player has been created</span>
mp<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'ready'</span><span class="token punctuation">,</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>event<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><table><thead><tr><th>Event name</th> <th>Types of</th> <th>Function returns</th> <th>Description</th></tr></thead> <tbody><tr><td>back</td> <td>EventHandle</td> <td></td> <td>Triggered when the back button is clicked.<br>Tag: Trigger only in non-full screen mode</td></tr> <tr><td>duration-change</td> <td>EventHandle</td> <td>{duration}</td> <td>Triggered when the video duration has been changed, only occurs when the duration is greater than 1, the unit is second (s)</td></tr> <tr><td>seek-progress</td> <td>EventHandle</td> <td>{percentage}</td> <td>Triggered when the user is addressing the video</td></tr> <tr><td>fullscreen-change</td> <td>EventHandle</td> <td>{direction,fullscreen}</td> <td>Triggered when the video enters or exits the full screen. When the player is initialized, this event will be triggered once by default<br><br>direction: indicates the direction of the current playback, applicable on the mobile phone<br><br>fullscreen: Indicates whether the current playback is in full screen in the pc environment, this attribute is only returned in the pc environment</td></tr> <tr><td>controls-toggle</td> <td>EventHandle</td> <td>{show}</td> <td>controls Triggered when the state of the control changes</td></tr> <tr><td>error</td> <td>EventHandle</td> <td>native event</td> <td>An error occurred during playback</td></tr> <tr><td>destroy</td> <td>EventHandle</td> <td></td> <td>Video destruction event</td></tr> <tr><td>ready</td> <td>EventHandle</td> <td></td> <td>The player has been created</td></tr></tbody></table> <h2 id="player-interface"><a href="#player-interface" class="header-anchor">#</a> Player interface</h2> <p>MuiPlayer provides some external interfaces, which implement the built-in functions of the player. Examples:</p> <div class="language-javascript extra-class"><pre class="language-javascript"><code><span class="token comment">// Initialize the player configuration</span>
<span class="token keyword">var</span> mp <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">MuiPlayer</span><span class="token punctuation">(</span>option<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// Show a message prompt</span>
mp<span class="token punctuation">.</span><span class="token function">showToast</span><span class="token punctuation">(</span><span class="token string">'prompt...'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div><table><thead><tr><th>Method name</th> <th>Transfer parameters</th> <th>Required</th> <th>Description</th></tr></thead> <tbody><tr><td>toggleControls</td> <td>true | false</td> <td>-</td> <td>Manipulate the display state of the player control, and the parameter passes a Boolean parameter to control hiding or displaying;<br>By default, the playback controls will be hidden according to the closeControlsTimer, and the advanced function <code>closeTimer | openTimer</code> can be used to close or open the timer, for example:<br><code>mp.toggleControls(true).closeTimer();</code><br><code>mp.toggleControls(false).openTimer();</code> <code>new</code></td></tr> <tr><td>showToast</td> <td>String | Object</td> <td>-</td> <td>Pop-up message prompt, refer to receiving a character or string or object<br>Ojbect = { message='', duration=1500, style={} }<br>duration is equal to 1500 by default, in milliseconds</td></tr> <tr><td>video</td> <td>-</td> <td>-</td> <td>Returns the native video element of the current instance</td></tr> <tr><td>reloadUrl</td> <td>Video Src</td> <td>-</td> <td>Specify a video address to reload the resource, if no parameter is passed, it will reload by default</td></tr> <tr><td>showRightSidebar</td> <td>Slot name</td> <td></td> <td>pop up Customize the right sidebar window, <a href="/guide/custom-control.html#example-3-customize-the-pop-up-window-on-the-right-sidebar">reference</a></td></tr> <tr><td>showLoading</td> <td>-</td> <td>-</td> <td>Display video buffer loading</td></tr> <tr><td>hideLoading</td> <td>-</td> <td>-</td> <td>Hidden video buffer loading</td></tr> <tr><td>openFullScreen</td> <td>-</td> <td></td> <td>Turn on full screen playback</td></tr> <tr><td>closeFullScreen</td> <td>-</td> <td></td> <td>Turn off full screen playback</td></tr> <tr><td>getControls</td> <td>-</td> <td></td> <td>Get all the player controls and return an array</td></tr> <tr><td>destroy</td> <td>-</td> <td>-</td> <td>Destroy the video player</td></tr> <tr><td>sendError</td> <td>event</td> <td></td> <td>Proactively send error reports</td></tr></tbody></table></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/muiplayer/hello-muiplayer/edit/master/docs/docs/guide/api.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/23/2023, 1:09:21 AM</span></div></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/guide/begin.html" class="prev">
        Quick start
      </a></span> <span class="next"><a href="/guide/mui-player-desktop-plugin.html">
        PC extension
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.3641bd26.js" defer></script><script src="/assets/js/23.35f66f6c.js" defer></script><script src="/assets/js/3.67a24b41.js" defer></script><script src="/assets/js/31.daa6ba5b.js" defer></script><script src="/assets/js/15.78fdfcaf.js" defer></script>
  </body>
</html>
